<script setup lang="ts">
import {PageMovieRespVO} from "@/interfaces/movie";

interface MovieListProps {
  list: PageMovieRespVO[]
}

const {list} = defineProps<MovieListProps>()
const goBuy = (id: number): void => {
  uni.navigateTo({
    url: "/pages/movie/index?id=" + id
  })
}
</script>

<template>
  <view>
    <u-list>
      <u-list-item
          v-for="(movie, index) in list"
          :key="index"
          class="movie-item"
      >
        <view class="movie">
          <view class="image">
            <image :src="movie.images" mode="heightFix"></image>
          </view>
          <view class="movie-info">
            <view class="info">
              <view class="movie-name">
                {{ movie.chineseName }}
              </view>
              <view class="movie-score">
                评分：{{ movie.score }}
              </view>
              <view class="movie-actor" >
                <up-text :text="'主演：' + movie.actors" :lines="2" wordWrap="anywhere" size="24"></up-text>
              </view>
            </view>
            <view class="handle">
              <view>
                <up-button type="primary" text="购票" size="small" @click="goBuy(movie.id)"></up-button>
              </view>
            </view>
          </view>
        </view>
      </u-list-item>
    </u-list>
  </view>
</template>

<style scoped>
.movie-item {

}

.movie {
  padding: 24rpx;
  background-color: #7D8BAE;
  display: flex;
  flex-direction: row;
  border-radius: 24rpx;
  margin-top: 24rpx;
}

.movie-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.info {
  flex: 2;
}

.handle {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.image {
  width: 200rpx;
  height: 220rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image image {
  height: 100%;
  border-radius: 24rpx;
}

.movie-name {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}


.info > view {
  margin-bottom: 15rpx;
}
</style>